<template>
	<!-- 岗位管理 -->
	<div class="content">
		<div class="main">
			<div class="tabsMain">
			<!-- 表单 -->
			<el-form ref="form" :model="addForm" label-width="128px" size="mini">
				<el-row :gutter="20">
				  <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
					  <!-- input -->
					  <el-form-item v-if="v.type == 'input'" :label="v.label">
						<el-input :suffix-icon='v.prefix' v-model="$data.addForm[v.modelValue]" placeholder="请输入内容"></el-input>
					  </el-form-item>
					  <!-- select -->
					  <el-form-item v-if="v.type == 'select'" :label="v.label">
						<el-select v-model="$data.addForm[v.modelValue]" placeholder="请选择" @focus="sname(v,i)" @change="scname" filterable >
							<el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id"> 
							<span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
						</el-select>
					  </el-form-item>
					  <!-- date -->
					  <el-form-item v-if="v.type == 'date'" :label="v.label">
						<el-date-picker class="autoWidth" :picker-options="pickerOptions" type="date" placeholder="选择日期" v-model="$data.addForm[v.modelValue]"
						 @focus="testDate(v,i)" @change="changDate"></el-date-picker>
					  </el-form-item>
				  </el-col>
				</el-row>
			</el-form>
			</div>
		</div>

		<div class="feet">
			
		</div>
	</div>
</template>

<script>
	// selfs / sons
	// self
	import AccTypeTab from './AccTypeTab2.js'
	// import { profttlist } from "@/api/thirdpartyPayment.js";
	
	export default {
		components: {
			AccTypeTab,
		},
		 props: {
			result: {
			  type: Object,
			  required: true
			},
		  },
		data() {
			return {
				idx:'',
				//arr
				formType:[],
				sexOptions:[{id:1,label:'男',value:'男'},{id:2,label:'女',value:'女'}],
				xlOptions:[],
				mjOptions:[],
				professionalOptions:[],
				antcOptions:[{id:0,label:'否'},{id:1,label:'一级抗生素'},{id:2,label:'二级抗生素'},{id:3,label:'三级抗生素'}],
				statusOptions:[{id:1,label:'是',value:'是'},{id:2,label:'否',value:'否'}],
				//obj
				addForm:{
					educationalBackground:'',//学历
					major:'',//所学专业
					professionalTitle:'',//专业职称
					qualificationNumber:'',//资格证号
					practicingNumber:'',//职业证号
					practiceDate:'',//职业日期
					prescriptionRights:'',//处方权
					chPrescriptionRights:'',//中药处方权
					anesthesiaAuthorization:'',//麻药权限
					surgicalPermission:'',//手术权限
					antibioticAuthorization:'', // 抗生素等级
					spiritPermission:'',//精神权限
					poisonPermission:'',//毒药权限
					antiTumorPermission:'',//抗肿瘤药物权限
				},
				//obj
				pickerOptions: {
				  disabledDate(time) {
					return time.getTime() > Date.now();
				  },
				  shortcuts: [{
					text: '今天',
					onClick(picker) {
					  picker.$emit('pick', new Date());
					}
				  }, {
					text: '昨天',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24);
					  picker.$emit('pick', date);
					}
				  }, {
					text: '一周前',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', date);
					}
				  }]
				},
			}
		},
		mounted() {
			// 左侧提交表单
			this.formType = AccTypeTab.map(function(v) {
				return v
			})
		},
		
		updated() {
			
		},
		methods: {
			// 设置数据方法
			  setData(data) {
			    this.addForm = {
			      ...this.addForm,
			      ...data
			    };
			    
			    // 处理特殊字段
			    if(data.deptList) {
			      this.tableData = JSON.parse(JSON.stringify(data.deptList));
			    }
			    
			    // 处理角色ID数组
			    if(data.roleId && typeof data.roleId === 'string') {
			      this.addForm.roleId = data.roleId.split(',').map(Number);
			    } else if(data.roleId) {
			      this.addForm.roleId = [...data.roleId];
			    }
			  },
			resetChildForm() {
			    if (this.$refs.form) {
			      this.$refs.form.resetFields();
			    }
			    
			    // 重置数据
			    this.addForm = {
			      educationalBackground: '',
			      major: '',
			      professionalTitle: '',
			      qualificationNumber: '',
			      practicingNumber: '',
			      practiceDate: '',
			      prescriptionRights: '',
			      anesthesiaAuthorization: '',
			      surgicalPermission: '',
			      spiritPermission: '',
			      poisonPermission: '',
			      antiTumorPermission: '',
				  antibioticAuthorization:'',
			    };
			  },
			// 步骤
			tof(){
				this.$emit('child',this.addForm)
			},
			testDate(v,i){
				console.log(v,i);
				this.idx = i
			},
			//  select聚焦
			async sname(v,i) {
				// i event
				switch (i) {
					case 0:
					// 证件类型
					this.xlOptions = this.result.data.edulBacdEntities.map(v=>{ return { label: v.name , ...v }})
					break;
					case 1:
					// 证件类型
					this.mjOptions = this.result.data.jobEntities.map(v=>{ return { label: v.name , ...v }})
					break;
					case 4:
						// 职称
						//  专业职称
						this.professionalOptions = this.result.data.profttlEntities.map(v=>{ return { label: v.name , ...v }})
						this.mjOptions = this.mjOptions.map(v=>{ return { label:v.name,...v} })
					break;
				}
			},
			// select选择
			scname(v){
				console.log(v);
				// 通知父组件数据变化
				this.$emit('form-change', this.addForm);
			},
			// 当日期变化时
			  changDate(val) {
			    let i = this.idx
			    switch(i) {
			      case 3:
			        function formatDate(date) {
			          const year = date.getFullYear();
			          const month = (date.getMonth() + 1).toString().padStart(2, '0');
			          const day = date.getDate().toString().padStart(2, '0');
			          return `${year}-${month}-${day}`;
			        }
			        this.addForm.practiceDate = formatDate(val);
			        // 通知父组件数据变化
			        this.$emit('form-change', this.addForm);
			    }
			  },
		},

		//生命周期
		created() {
			
		},

	}
</script>

<style lang="less" scoped>
.content{
	height: 100%;
	width: 100%;
	.header{
		
	}
	.main{
		border: 1px solid #e8f0ee;
		padding: 12px;
		.tabsMain{
			display: flex;
			// date flex
			.autoWidth{
				width: 100%; /* 设置宽度为100% */
			}
		}
	}
}
</style>